<template>
    <view class="container">
        <!-- 科目基本信息 -->
        <view class="subject-info">
            <view class="subject-header">
                <text class="subject-name">{{ subjectInfo.name || '暂无名称' }}</text>
                <text class="subject-grade">{{ getGradeText(subjectInfo.grade) }}</text>
            </view>
            <view class="subject-desc">{{ subjectInfo.description || '暂无描述' }}</view>
        </view>

        <!-- 教师列表 -->
        <view class="section-title">相关教师</view>
        <scroll-view class="teacher-list" scroll-y @scrolltolower="loadMore">
            <!-- 教师项 -->
            <view class="teacher-item" v-for="(teacher, index) in teachers" :key="index" @tap="viewTeacherDetail(teacher)">
                <image :src="teacher.avatar || '/static/default-avatar.png'" class="teacher-avatar" mode="aspectFill"></image>
                <view class="teacher-info">
                    <view class="teacher-header">
                        <text class="teacher-name">{{ teacher.name }}</text>
                        <text class="teacher-title">{{ getTeacherTitle(teacher) }}</text>
                    </view>
                    <view class="teacher-subjects">{{ getSubjectText(teacher.subjects) }}</view>
                    <view class="teacher-description">{{ teacher.description }}</view>
                    <view class="teacher-footer">
                        <view class="price">¥{{ teacher.price }}/小时</view>
                        <view class="contact-btn" @tap.stop="contactTeacher(teacher)">联系老师</view>
                    </view>
                </view>
            </view>

            <!-- 加载状态 -->
            <view class="loading" v-if="loading">加载中...</view>
            <view class="no-more" v-if="noMore && !loading">没有更多了</view>
            <view class="empty-list" v-if="teachers.length === 0 && !loading">暂无相关教师</view>
        </scroll-view>
    </view>
</template>

<script>
import { request } from '@/utils/request.js';
import { subjectApi } from '@/api/subject.js';

export default {
    data() {
        return {
            subject: null,
            teacherList: [],
            hasMore: true,
            page: 1,
            loading: false,
            subjectId: null,
            subjectInfo: {},
            teachers: [],
            noMore: false
        }
    },
    onLoad(options) {
        if (options.id) {
            this.subjectId = options.id;
            this.loadSubjectInfo();
            this.loadTeachers();
        } else {
            uni.showToast({
                title: '未找到科目信息',
                icon: 'none'
            });
        }
    },
    methods: {
        async loadSubjectInfo() {
            uni.showLoading({
                title: '加载中...'
            });
            
            try {
                const response = await subjectApi.getSubjectById(this.subjectId);
                if (response && response.code === 200) {
                    this.subject = response.data;
                    this.subjectInfo = response.data || {};
                } else {
                    uni.showToast({
                        title: response?.msg || '获取科目信息失败',
                        icon: 'none'
                    });
                }
            } catch (error) {
                console.error('加载科目信息错误:', error);
                uni.showToast({
                    title: '获取科目信息失败',
                    icon: 'none'
                });
            } finally {
                uni.hideLoading();
            }
        },
        
        // 加载教师列表
        async loadTeachers() {
            if (this.loading || this.noMore) return;
            
            this.loading = true;
            try {
                const res = await request({
                    url: '/user/teachers/list',
                    method: 'GET',
                    params: {
                        page: this.page,
                        subject: this.subjectInfo.name
                    }
                });
                
                if (res.code === 200) {
                    const newTeachers = Array.isArray(res.data.records) ? res.data.records : [];
                    
                    if (newTeachers.length === 0) {
                        this.noMore = true;
                    } else {
                        this.teachers = [...this.teachers, ...newTeachers];
                        this.page++;
                    }
                }
            } catch (error) {
                console.error('获取教师列表失败:', error);
            } finally {
                this.loading = false;
            }
        },
        
        // 加载更多
        loadMore() {
            this.loadTeachers();
        },
        
        // 查看教师详情
        viewTeacherDetail(teacher) {
            uni.navigateTo({
                url: `/pages/teacher/detail?id=${teacher.id}`
            });
        },
        
        // 联系教师
        contactTeacher(teacher) {
            uni.navigateTo({
                url: `/pages/teacher/detail?id=${teacher.id}`
            });
        },
        
        // 获取年级文本
        getGradeText(grade) {
            const gradeMap = {
                1: '小学',
                2: '初中',
                3: '高中'
            };
            return gradeMap[grade] || '';
        },
        
        // 获取科目显示文本
        getSubjectText(subjects) {
            if (!subjects || subjects.length === 0) return '暂无科目信息';
            return subjects.join('、');
        },
        
        // 获取教师职称
        getTeacherTitle(teacher) {
            if (!teacher.teachingAge) return '教师';
            
            if (teacher.teachingAge >= 15) {
                return '高级教师';
            } else if (teacher.teachingAge >= 8) {
                return '一级教师';
            } else {
                return '教师';
            }
        }
    }
}
</script>

<style>
.container {
    padding: 20rpx;
    background: #f5f5f5;
}

.subject-info {
    background: #fff;
    padding: 30rpx;
    border-radius: 16rpx;
    margin-bottom: 20rpx;
}

.subject-header {
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;
}

.subject-name {
    font-size: 36rpx;
    font-weight: bold;
    margin-right: 20rpx;
}

.subject-grade {
    font-size: 24rpx;
    color: #666;
    background: #f5f5f5;
    padding: 4rpx 16rpx;
    border-radius: 20rpx;
}

.subject-desc {
    font-size: 28rpx;
    color: #666;
    line-height: 1.6;
}

.section-title {
    font-size: 32rpx;
    font-weight: bold;
    margin: 30rpx 0 20rpx;
}

.teacher-list {
    height: calc(100vh - 300rpx);
}

.teacher-item {
    display: flex;
    padding: 30rpx;
    background: #fff;
    border-radius: 16rpx;
    margin-bottom: 20rpx;
}

.teacher-avatar {
    width: 120rpx;
    height: 120rpx;
    border-radius: 60rpx;
    margin-right: 20rpx;
}

.teacher-info {
    flex: 1;
}

.teacher-header {
    display: flex;
    align-items: center;
    margin-bottom: 10rpx;
}

.teacher-name {
    font-size: 32rpx;
    font-weight: bold;
    margin-right: 20rpx;
}

.teacher-title {
    font-size: 24rpx;
    color: #666;
    background: #f5f5f5;
    padding: 4rpx 16rpx;
    border-radius: 20rpx;
}

.teacher-subjects {
    font-size: 26rpx;
    color: #666;
    margin-bottom: 10rpx;
}

.teacher-description {
    font-size: 26rpx;
    color: #999;
    margin-bottom: 20rpx;
}

.teacher-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.price {
    color: #E02E24;
    font-size: 32rpx;
    font-weight: bold;
}

.contact-btn {
    background: #E02E24;
    color: #fff;
    padding: 10rpx 30rpx;
    border-radius: 30rpx;
    font-size: 26rpx;
}

.loading, .no-more, .empty-list {
    text-align: center;
    padding: 20rpx;
    color: #999;
    font-size: 26rpx;
}

.empty-list {
    padding: 100rpx 0;
}
</style> 